<template>
  <div class="container">
    <div class="gradient-icon"></div>
    <Table :columns="columns1" :data="cssFontData"> </Table>
  </div>
</template>

<script>
export default {
  name: "CssFont",
  data() {
    return {
      columns1: [
        {
          title: "属性",
          key: "property"
        },
        {
          title: "描述",
          key: "details"
        }
      ],
      cssFontData: [
        { property: "font", details: "在一个声明中设置所有的字体属性" },
        { property: "font-family", details: "指定文本的字体系列" },
        { property: "font-size", details: "指定文本的字体大小" },
        { property: "font-style", details: "指定文本的字体样式" },
        {
          property: "font-variant",
          details: "以小型大写字体或者正常字体显示文本。"
        },
        { property: "font-weight", details: "指定字体的粗细。" }
      ]
    };
  },
  mounted() {
    console.log("hhhhhh");
    this.$axios
      .get("/static/font.json")
      .then(res => {
        this.cssFontData = res.data.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>

<style scoped>
.gradient-icon {
  background: linear-gradient(
    to bottom,
    #000 0%,
    #000 20%,
    transparent 20%,
    transparent 40%,
    #000 40%,
    #000 60%,
    transparent 60%,
    transparent 80%,
    #000 80%,
    #000 100%
  );
}
</style>
